<template>
  <div>
    <h3 class="title">App组件 -- {{ ptitle }}</h3>
    <hr />
    <!-- 
      ref 实现组件通信
      如果ref绑定在自定义组件上,通可以得到当前组件实例对象
     -->
    <child ref="childRef" />
    <button @click="getChild">父获取child组件中的数据</button>
  </div>
</template>

<script>
import child from './components/child.vue'
export default {
  components: {
    child
  },
  data() {
    return {
      age: 100,
      ptitle: ''
    }
  },
  methods: {
    getChild() {
      // this.$refs.childRef.title = 'aaaaa'
      // this.ptitle = this.$refs.childRef.title
      this.ptitle = this.$refs.childRef.setTitle('afewfewfew')
    }
  },
  mounted(){
    // console.log(this.$refs.childRef?.title)
    this.ptitle = this.$refs.childRef.title
  }
}
</script>

<style lang="scss" scoped></style>
